import { ListItem } from 'antd-mobile/es/components/list/list-item'
import './index.css'
import { Image, List, InfiniteScroll } from 'antd-mobile'

function BillList({ billlist, data, hasMore, loadMore }) {
    return (
        <div className='body-list'>
            <div className='list'>
                <List className='listitem'>
                    {billlist.map((item, index) => (
                        <ListItem className='listitem' key={index} prefix={
                            <div style={{
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                height: '100%' /* 匹配列表项高度 */
                            }}>
                                <div dangerouslySetInnerHTML={{ __html: item.bill_type.icon.replace('<svg', '<svg width="30px" height="30px"') }}></div>
                                <div style={{ fontSize: '10px' }}>{item.bill_type.name}</div>
                            </div>
                        }>
                            <div style={{
                                display: 'flex',
                                width: '100%',
                                alignItems: 'center'
                            }}>
                                <div style={{ fontSize: '15px', color: '#888', flex: 1 }}>
                                    <div style={{ fontSize: '15px', color: '#888' }}>{item.bill_time}</div>
                                    <div style={{ fontSize: '14px', color: '#666', marginTop: 4 }}>{item.remark}</div>
                                </div>
                                <div className='outprice' style={{ fontSize: '20px' }}>{item.amount}</div>
                            </div>
                        </ListItem>
                    ))}
                    <InfiniteScroll
                        loadMore={loadMore}
                        hasMore={hasMore}
                        threshold={100}
                    >
                        {hasMore ? (
                            <span className="loading-text">加载中...</span>
                        ) : (
                            <span className="no-more">没有更多了</span>
                        )}
                    </InfiniteScroll>
                </List>
            </div>
        </div>
    )
}
export default BillList